<template>
    <div>
        <el-button icon="back" @click="back" circle></el-button>
        <el-form :model="stuForm" :rules="stuFormRules" ref="stuFormEle" label-width="auto">

            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="stuForm.name">
                </el-input>
            </el-form-item>
            <el-form-item label="学生性别" prop="gender">
                <el-radio-group v-model="stuForm.gender">
                    <el-radio value="男" size="large">男</el-radio>
                    <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="学习方向" prop="direction">
                <el-select v-model="stuForm.direction">
                    <el-option v-for="(d, index) in directionList" :value="d" :key="index">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所在班级" prop="class">
                <el-select v-model="stuForm.class">
                    <el-option v-for="c in classList" :value="c.classname" :key="c._id" :label="c.classname">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学管老师" prop="manager_id">
                <el-select v-model='stuForm.manager_id'>
                    <el-option v-for="m in manageList" :value="m._id" :label="m.name" :key="m._id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="授课老师" prop="teacher_id">
                <el-select v-model="stuForm.teacher_id">
                    <el-option v-for="  t in tearchList" :value="t._id" :key="t._id" :label="t.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生源学校" prop="school">
                <el-select v-model="stuForm.school">
                    <el-option v-for="s in schoolList" :value="s.schoolname" :label="s.schoolname" :key="s._id">

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所在年级">
                <el-select v-model="stuForm.grade">
                    <el-option v-for="(g, index) in gradeList" :value="g" :label="g" :key="index">

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学历水平">
                <el-select v-model="stuForm.education">
                    <el-option v-for="(e, index) in educationalLevelList" :value="e" :key="index">

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="大学专业">
                <el-select v-model="stuForm.major">
                    <el-option v-for="m in majorList" :value="m.majorname" :key="m._id" :label="m.majorname">

                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="学生照片">
                <el-upload action="/dev-api/manage/img/upload" list-type="picture-card" :auto-upload="true"
                    accept="image/*" name="image" v-model:file-list="fileList" :on-success="succcessUpload">
                    <el-icon>
                        <Plus />
                    </el-icon>

                    <template #file="{ file }">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <el-icon><zoom-in /></el-icon>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete"
                                    @click="handleDownload(file)">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </span>
                            </span>
                        </div>
                    </template>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-form-item>

            <el-form-item label="备注">
                <div style="border: 1px solid #ccc">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="stuForm.note"
                        :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                </div>
            </el-form-item>
            <el-form-item label="操作">
                <el-button type="primary" @click="submitAndClear">确认</el-button>
                <el-button type="info" @click="re">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref, watchEffect } from 'vue';
import { useSearchStuMsg } from '../main/useSearchStuMsg';
import { addStu } from './addStu';
import { Upload } from './Upload';
import { RichText } from './richText';
//@ts-ignore
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

import type { UploadFile, UploadInstance } from 'element-plus';
import { useRoute } from 'vue-router';
import { reqFindStu } from '@/api/reqStu';
import router from '@/router';



const {
    stuForm,
    directionList,
    tearchList,
    manageList,
    classList,
    gradeList,
    educationalLevelList,
    schoolList,
    majorList,
    reset,
    stuFormRules,
    stuFormEle,
    submitStu,
    updateSTu
} = addStu()





const { dialogImageUrl,
    dialogVisible,
    disabled,
    handleRemove,
    handlePictureCardPreview,
    handleDownload,
    succcessUpload, fileList } = Upload()

const { editorRef,
    valueHtml,
    mode, // 或 'simple'
    toolbarConfig,
    editorConfig,
    handleCreated, } = RichText()

const back = () => {
    history.back()
}


const re = () => {
    reset()
    fileList.value.forEach((item) => {
        handleRemove(item as UploadFile)
    })
}


const uploadRef = ref<UploadInstance>()
const submitAndClear = async () => {

    if (route.name === "edit") {
        await updateSTu()
       router.push({name:"main"})
    } else {
        await submitStu()
        reset()
        fileList.value = []  //只是清空页面的图片
    }
}



watchEffect(() => {
    stuForm.value.pictures = fileList.value.map((file) => {
        return {
            name: file.name,
            url: file.url
        }
    })
})

const route = useRoute()

onMounted(async () => {
    if (route.name === "edit") {
        const id = route.params.id as string
        const { data } = await reqFindStu(id)
        console.log(data);
        stuForm.value = data

        fileList.value = data.pictures?.map((item: { name: any; url: any; }) => {
            return {
                name: item.name,
                url: item.url
            }
        }) || []

    }
})



</script>

<style></style>